<template>
	<div>
		<my-form :model="formData" :formItem="formItem" label-width="100px" ref="formRef">
			<template #executionListener>
				<el-badge :value="executionListenerLength">
					<el-button @click="dialogExecutionListener = true">编辑</el-button>
				</el-badge>
			</template>
			<template #signal>
				<el-badge :value="signalLength">
					<el-button @click="dialogSignal = true">编辑</el-button>
				</el-badge>
			</template>
		</my-form>
		<executionListenerDialog v-model="dialogExecutionListener" :element="element" :modeler="modeler" @close="finishExecutionListener" />
		<signalDialog v-model="dialogSignal" :element="element" :modeler="modeler" @close="finishSignal" />
	</div>
</template>

<script setup>
import executionListenerDialog from './property/executionListener.vue';
import signalDialog from './property/signal.vue';
import hooksPanel, { PanelProps } from '../common/Panel';
import { commonParse } from '../common/parseElement';

let formRef = ref(null);

const props = defineProps({
		...PanelProps
	}),
	formItem = computed(() => [
		{
			itemType: 'select',
			prop: 'processCategory',
			label: '流程分类',
			list: props.categorys,
			required: true
		},
		{
			prop: 'id',
			label: '流程标识key',
			required: true,
			disabled: true,
			clearable: false
		},
		{
			prop: 'name',
			label: '流程名称'
		},
		{
			prop: 'documentation',
			label: '节点描述'
		},
		{
			prop: 'executionListener',
			label: '执行监听器'
		},
		{
			prop: 'signal',
			label: '信号定义'
		}
	]);

const {
	formData,
	dialogExecutionListener,
	executionListenerLength,
	updateProperties,
	finishExecutionListener,
	computedExecutionListenerLength,

	dialogSignal,
	signalLength,
	computedSignalLength,
	finishSignal
} = hooksPanel(props);

formData.value = commonParse(props.element);
computedExecutionListenerLength();

/****************************************************** 信号定义 ***********************************************/
watch(
	() => formData.value.processCategory,
	(val) => {
		if (val === '') val = null;
		updateProperties({ 'flowable:processCategory': val });
	}
);
computedSignalLength();

defineExpose({
	childValidate: async () => {
		return await formRef.value?.$refs?.refMyForm?.validate();
	}
});
</script>
